<script setup lang="ts">

// 获取 子组件 参数
import { computed, inject } from 'vue';
import{ MyCollaContextKey, type IdType, type ItemProps } from './types';
import Icon from '../Icon/Icon.vue';
// 获取依赖注入的参数
const MyCollaContext = inject(MyCollaContextKey)

const props = defineProps<ItemProps>()

// 标记是否显示 (会自动根据上下文的变化进行更改，所以用 计算属性 )
const isActive = computed(()=>{
  return  MyCollaContext?.activeItem.value.includes(props.id)
})

// 处理点击事件
const handleClick =(item:IdType)=>{
  MyCollaContext?.handleActiveItem(item)
}

// transition 事件们
const transitionEvents : Record<string,(el:HTMLElement)=>void> ={
  beforeEnter(el){
    el.style.height = '0px'
    el.style.overflow = 'hidden'
  },
  enter(el){
    el.style.height = `${el.scrollHeight}px`
  },
  afterEnter(el){
    el.style.height = ''
    el.style.overflow = ''
  },
  beforeLeave(el){
    el.style.height = `${el.scrollHeight}px`
    el.style.overflow = 'hidden'
  },
  leave(el){
    el.style.height = '0px'
  },
  afterLeave(el){
    el.style.height = ''
    el.style.overflow = ''
  }
}


</script>
<template>
  <div class="lxh-myColla-item"
  :class="{'isdisabled':isdisabled}"
  >
    <!-- 头部 -->
     <div class="lxh-myColla-item__header" :class="{ 'is-disabled':isdisabled ,'is-active':isActive }" :id="`lxh-myColla-item-${id}`" @click="handleClick(props.id)">
      <slot name="title">{{ title }}</slot>
      <Icon icon="angle-right" class="header-angle"/>
     </div>
    <!-- 内容区域 -->
     <!-- 内置组件 -->
     <Transition name="slide" v-on="transitionEvents">
      <div v-show="isActive">
        <div class="lxh-myColla-item__content" :id="`lxh-myColla-item-${id}`" >
          <slot></slot>
        </div>
      </div>
     </Transition>
  </div>
</template>
<style scoped>
</style>